<template>
  <div class="user-wrap">
    <div class="left">
      <div class="img-wrap"
           w-136-136
           aspectratio>
        <img src="../../../assets/images/avatar.png"
             alt=""
             aspectratio-content>
      </div>
    </div>
    <div class="right">
      <div class="name-box">
        <div class="name">{{userInfo.nickname}}</div>
        <div class="attestation">已认证</div>
      </div>
      <div class="phone">{{userInfo.mobile}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'user',
  props: {
    userInfo: Object
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.user-wrap
  width 100%
  height 216px
  background $common_bgc
  box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
  border-radius 24px
  display flex
  align-items center
  justify-content space-between
  padding-left 32px
  padding-right 32px
  box-sizing border-box
  margin-bottom 20px

  .left
    width 136px
    height 136px
    background rgba(255, 255, 255, 1)
    border 2px solid rgba(255, 255, 255, 1)
    box-shadow 0px 8px 16px 0px rgba(5, 5, 5, 0.26)
    border-radius 50%
    margin-right 40px

    .img-wrap
      background-color $common_bgc_gray
      border-radius 50%

  .right
    flex 1
    min-width 0
    height 100%
    padding-top 50px
    box-sizing border-box

    .name-box, .phone
      display flex
      align-items center
      font-size $shop_name
      line-height 52px
      font-weight 400
      color $id_input

      .name
        margin-right 44px
        max-width 320px
        ellipsis()

      .attestation
        font-size $common_fz
        line-height 52px
        font-weight 400
        color #747D8C
</style>
